<script>
  import axios from "axios";
  import req from "@/utils/request"
  export default {
    name: 'Main',
    data(){
      return {
        tableData: [],
      }
    },
    mounted(){
      (async () => {
        const res = await req.get("/user/selectAll")
        this.tableData = res.data
      })()
    },
    methods:{
      addUser() {
        (async () => {
          const res = await req.post("/user/add", {
            "username": "126",
            "password": "123",
            "name": "123",
            "phone": "123",
            "email": "123",
            "address": "123",
            "avatar": "123"
          })
          console.log(res)
        })()
        console.log("点击了按钮!")
      }
    }
  }
</script>

<template>
  <el-main>
    <el-card style="flex: 3; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); margin-right: 5px">
      <div slot="header">
        <span style="font-size: 14px">卡片标题</span>
      </div>
      <div>
        <el-table :data="tableData">
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="地址" prop="address"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card style="flex: 1; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);">
      <div slot="header">
        <el-button type="primary" @click="addUser">点击添加用户</el-button>
      </div>
      <div>

      </div>
    </el-card>
  </el-main>
</template>

<style scoped>
.el-main {
  display: flex;
}
</style>